<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API文档 - 智慧题库帮助中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }
            .api-card-hover {
                transition: all 0.3s ease;
            }
            .api-card-hover:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 16px rgba(0,0,0,0.08);
            }
            .snippet {
                transition: all 0.3s ease;
            }
            .snippet:hover {
                box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
            }
            .nav-link-active {
                @apply text-primary border-l-4 border-primary bg-primary/5 font-medium;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <a href="#" class="flex items-center">
                    <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                    <h1 class="text-xl font-bold text-gray-800">智慧题库</h1>
                </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">教材版本</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">统计分析</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助中心</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">系统设置</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索API文档..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">5</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 移动端搜索框 -->
    <div class="md:hidden p-3 bg-white border-t border-gray-100">
        <div class="relative">
            <input type="text" placeholder="搜索API文档..." 
                   class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>

    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧边栏 - API文档导航 -->
        <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
            <div class="p-4 border-b">
                <h2 class="font-bold text-lg mb-3">帮助中心</h2>
                
                <div class="space-y-1">
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-question-circle mr-2"></i>常见问题
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-book mr-2"></i>使用指南
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-film mr-2"></i>视频教程
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-primary/10 text-primary font-medium">
                        <i class="fa fa-file-text-o mr-2"></i>API文档
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-users mr-2"></i>社区交流
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-shield mr-2"></i>安全中心
                    </a>
                </div>
            </div>
            
            <!-- API文档分类 -->
            <div class="p-4">
                <h3 class="font-medium text-sm text-gray-500 mb-2">API文档分类</h3>
                <div class="space-y-1">
                    <a href="#" class="nav-link-active block py-2 px-3 rounded-lg">
                        <span class="inline-block w-2 h-2 rounded-full bg-primary mr-2"></span>
                        概述
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        认证授权
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        题目管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        教材版本
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        知识点管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        用户管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        统计分析
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        错误码
                    </a>
                </div>
            </div>
            
            <!-- 快速链接 -->
            <div class="p-4 border-t">
                <h3 class="font-medium text-sm text-gray-500 mb-3">快速链接</h3>
                
                <div class="space-y-2">
                    <a href="#" class="block py-2 px-3 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm flex items-center">
                        <i class="fa fa-download text-primary mr-2"></i>
                        API文档下载
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm flex items-center">
                        <i class="fa fa-code text-primary mr-2"></i>
                        SDK & 示例代码
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm flex items-center">
                        <i class="fa fa-external-link text-primary mr-2"></i>
                        API Explorer
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm flex items-center">
                        <i class="fa fa-history text-primary mr-2"></i>
                        API变更日志
                    </a>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <a href="#" class="hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">帮助中心</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-primary">API文档</span>
                </div>
                
                <!-- 内容标题区 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">API文档</h2>
                    <p class="text-gray-500 mt-1">通过我们提供的API接口，您可以将智慧题库系统的功能集成到您的应用程序中</p>
                </div>
                
                <!-- API概览卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-sm p-6 api-card-hover">
                        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                            <i class="fa fa-key text-primary text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">认证授权</h3>
                        <p class="text-gray-600 mb-4">了解如何获取API访问凭证和进行身份验证，保护您的数据安全。</p>
                        <a href="#" class="text-primary hover:underline flex items-center">
                            查看文档 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm p-6 api-card-hover">
                        <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-4">
                            <i class="fa fa-database text-secondary text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">数据接口</h3>
                        <p class="text-gray-600 mb-4">获取题库、教材版本、知识点等核心数据的API接口文档和使用示例。</p>
                        <a href="#" class="text-primary hover:underline flex items-center">
                            查看文档 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm p-6 api-card-hover">
                        <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
                            <i class="fa fa-line-chart text-accent text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">统计分析</h3>
                        <p class="text-gray-600 mb-4">获取系统数据统计和分析结果的API接口，支持自定义报表生成。</p>
                        <a href="#" class="text-primary hover:underline flex items-center">
                            查看文档 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                    </div>
                </div>
                
                <!-- API使用流程 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <h3 class="font-bold text-lg mb-4">API使用流程</h3>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">1</div>
                            <div class="ml-4">
                                <h4 class="font-medium text-lg mb-2">获取API凭证</h4>
                                <p class="text-gray-600">在系统设置中申请API访问凭证，获取AppID和AppSecret。这些凭证将用于后续的API请求认证。</p>
                                <div class="mt-3 bg-gray-50 p-4 rounded-lg snippet">
                                    <pre class="text-gray-700 text-sm overflow-x-auto"><code>AppID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
AppSecret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
                            <div class="ml-4">
                                <h4 class="font-medium text-lg mb-2">获取访问令牌</h4>
                                <p class="text-gray-600">使用AppID和AppSecret调用认证API获取访问令牌(Access Token)，该令牌有效期为2小时。</p>
                                <div class="mt-3 bg-gray-50 p-4 rounded-lg snippet">
                                    <pre class="text-gray-700 text-sm overflow-x-auto"><code>POST https://api.example.com/v1/auth/token

{
  "app_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "app_secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}</code></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">3</div>
                            <div class="ml-4">
                                <h4 class="font-medium text-lg mb-2">调用API接口</h4>
                                <p class="text-gray-600">在请求头中携带访问令牌调用具体的API接口，调用格式如下：</p>
                                <div class="mt-3 bg-gray-50 p-4 rounded-lg snippet">
                                    <pre class="text-gray-700 text-sm overflow-x-auto"><code>GET https://api.example.com/v1/questions/list?category=math&difficulty=easy

Headers:
Authorization: Bearer {access_token}</code></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">4</div>
                            <div class="ml-4">
                                <h4 class="font-medium text-lg mb-2">处理响应结果</h4>
                                <p class="text-gray-600">API响应将返回JSON格式的数据，包含状态码、消息和具体数据。根据状态码处理业务逻辑。</p>
                                <div class="mt-3 bg-gray-50 p-4 rounded-lg snippet">
                                    <pre class="text-gray-700 text-sm overflow-x-auto"><code>{
  "code": 200,
  "message": "操作成功",
  "data": {
    "questions": [
      {
        "id": 1001,
        "title": "1+1等于多少?",
        "type": "single_choice",
        "options": ["1", "2", "3", "4"],
        "answer": "B"
      },
      // 更多题目...
    ],
    "total": 25,
    "page": 1,
    "page_size": 10
  }
}</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- API示例 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <h3 class="font-bold text-lg mb-4">API示例</h3>
                    
                    <div class="mb-6">
                        <h4 class="font-medium text-lg mb-3 flex items-center">
                            <span class="inline-block w-2 h-2 rounded-full bg-primary mr-2"></span>
                            获取题目列表
                        </h4>
                        
                        <div class="flex flex-col md:flex-row gap-4">
                            <div class="flex-1">
                                <p class="text-gray-600 mb-3">获取指定分类和难度的题目列表，支持分页查询。</p>
                                
                                <div class="mb-3">
                                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                                        <div class="flex items-center">
                                            <i class="fa fa-info-circle text-blue-500 mr-2"></i>
                                            <span class="font-medium">请求URL</span>
                                        </div>
                                        <div class="mt-2 text-sm text-gray-700">
                                            <code class="bg-gray-100 px-2 py-0.5 rounded">GET</code>
                                            <code class="bg-gray-100 px-2 py-0.5 rounded">https://api.example.com/v1/questions/list</code>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                                        <div class="flex items-center">
                                            <i class="fa fa-key text-blue-500 mr-2"></i>
                                            <span class="font-medium">请求参数</span>
                                        </div>
                                        <div class="mt-2 overflow-x-auto">
                                            <table class="min-w-full text-sm">
                                                <thead>
                                                    <tr class="bg-gray-100">
                                                        <th class="py-2 px-3 text-left font-medium">参数名</th>
                                                        <th class="py-2 px-3 text-left font-medium">类型</th>
                                                        <th class="py-2 px-3 text-left font-medium">是否必填</th>
                                                        <th class="py-2 px-3 text-left font-medium">描述</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200">
                                                    <tr>
                                                        <td class="py-2 px-3">category</td>
                                                        <td class="py-2 px-3">string</td>
                                                        <td class="py-2 px-3">否</td>
                                                        <td class="py-2 px-3">题目分类，如math、chinese等</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">difficulty</td>
                                                        <td class="py-2 px-3">string</td>
                                                        <td class="py-2 px-3">否</td>
                                                        <td class="py-2 px-3">题目难度，如easy、medium、hard</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">page</td>
                                                        <td class="py-2 px-3">integer</td>
                                                        <td class="py-2 px-3">否</td>
                                                        <td class="py-2 px-3">页码，默认1</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">page_size</td>
                                                        <td class="py-2 px-3">integer</td>
                                                        <td class="py-2 px-3">否</td>
                                                        <td class="py-2 px-3">每页数量，默认10，最大50</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                                        <div class="flex items-center">
                                            <i class="fa fa-file-text-o text-blue-500 mr-2"></i>
                                            <span class="font-medium">返回示例</span>
                                        </div>
                                        <div class="mt-2 text-sm text-gray-700">
                                            <pre class="overflow-x-auto">{
  "code": 200,
  "message": "操作成功",
  "data": {
    "questions": [
      {
        "id": 1001,
        "title": "1+1等于多少?",
        "type": "single_choice",
        "options": ["1", "2", "3", "4"],
        "answer": "B",
        "difficulty": "easy",
        "category": "math",
        "created_at": "2025-01-15T10:30:00Z"
      },
      // 更多题目...
    ],
    "total": 25,
    "page": 1,
    "page_size": 10,
    "total_pages": 3
  }
}</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex-1">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="flex items-center justify-between mb-3">
                                        <h5 class="font-medium">请求示例</h5>
                                        <div class="flex space-x-2">
                                            <button class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">Curl</button>
                                            <button class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">JavaScript</button>
                                            <button class="px-2 py-1 text-xs bg-primary text-white rounded">Python</button>
                                        </div>
                                    </div>
                                    
                                    <div class="text-sm text-gray-700">
                                        <pre class="overflow-x-auto">import requests

url = "https://api.example.com/v1/questions/list"

headers = {
    "Authorization": "Bearer your_access_token_here"
}

params = {
    "category": "math",
    "difficulty": "easy",
    "page": 1,
    "page_size": 10
}

response = requests.get(url, headers=headers, params=params)

if response.status_code == 200:
    data = response.json()
    print("获取题目列表成功")
    for question in data["data"]["questions"]:
        print(f"题目: {question['title']}")
else:
    print(f"请求失败: {response.status_code}")
    print(response.text)</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-lg mb-3 flex items-center">
                            <span class="inline-block w-2 h-2 rounded-full bg-secondary mr-2"></span>
                            创建题目
                        </h4>
                        
                        <div class="flex flex-col md:flex-row gap-4">
                            <div class="flex-1">
                                <p class="text-gray-600 mb-3">创建新的题目，支持单选题、多选题和解答题等多种题型。</p>
                                
                                <div class="mb-3">
                                    <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg">
                                        <div class="flex items-center">
                                            <i class="fa fa-info-circle text-green-500 mr-2"></i>
                                            <span class="font-medium">请求URL</span>
                                        </div>
                                        <div class="mt-2 text-sm text-gray-700">
                                            <code class="bg-gray-100 px-2 py-0.5 rounded">POST</code>
                                            <code class="bg-gray-100 px-2 py-0.5 rounded">https://api.example.com/v1/questions/create</code>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg">
                                        <div class="flex items-center">
                                            <i class="fa fa-key text-green-500 mr-2"></i>
                                            <span class="font-medium">请求参数</span>
                                        </div>
                                        <div class="mt-2 overflow-x-auto">
                                            <table class="min-w-full text-sm">
                                                <thead>
                                                    <tr class="bg-gray-100">
                                                        <th class="py-2 px-3 text-left font-medium">参数名</th>
                                                        <th class="py-2 px-3 text-left font-medium">类型</th>
                                                        <th class="py-2 px-3 text-left font-medium">是否必填</th>
                                                        <th class="py-2 px-3 text-left font-medium">描述</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200">
                                                    <tr>
                                                        <td class="py-2 px-3">title</td>
                                                        <td class="py-2 px-3">string</td>
                                                        <td class="py-2 px-3">是</td>
                                                        <td class="py-2 px-3">题目内容</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">type</td>
                                                        <td class="py-2 px-3">string</td>
                                                        <td class="py-2 px-3">是</td>
                                                        <td class="py-2 px-3">题目类型，single_choice、multiple_choice、essay等</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">options</td>
                                                        <td class="py-2 px-3">array</td>
                                                        <td class="py-2 px-3">否</td>
                                                        <td class="py-2 px-3">选项列表，单选题和多选题需要</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">answer</td>
                                                        <td class="py-2 px-3">string/array</td>
                                                        <td class="py-2 px-3">是</td>
                                                        <td class="py-2 px-3">答案，单选题为选项字母，多选题为选项字母数组</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">category</td>
                                                        <td class="py-2 px-3">string</td>
                                                        <td class="py-2 px-3">是</td>
                                                        <td class="py-2 px-3">题目分类</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="py-2 px-3">difficulty</td>
                                                        <td class="py-2 px-3">string</td>
                                                        <td class="py-2 px-3">是</td>
                                                        <td class="py-2 px-3">题目难度</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg">
                                        <div class="flex items-center">
                                            <i class="fa fa-file-text-o text-green-500 mr-2"></i>
                                            <span class="font-medium">返回示例</span>
                                        </div>
                                        <div class="mt-2 text-sm text-gray-700">
                                            <pre class="overflow-x-auto">{
  "code": 200,
  "message": "题目创建成功",
  "data": {
    "question_id": 1005,
    "title": "三角形内角和是多少度?",
    "type": "single_choice",
    "options": ["90", "180", "270", "360"],
    "answer": "B",
    "category": "math",
    "difficulty": "easy",
    "created_at": "2025-07-03T14:25:30Z"
  }
}</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex-1">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <div class="flex items-center justify-between mb-3">
                                        <h5 class="font-medium">请求示例</h5>
                                        <div class="flex space-x-2">
                                            <button class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">Curl</button>
                                            <button class="px-2 py-1 text-xs bg-primary text-white rounded">JavaScript</button>
                                            <button class="px-2 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded">Python</button>
                                        </div>
                                    </div>
                                    
                                    <div class="text-sm text-gray-700">
                                        <pre class="overflow-x-auto">const axios = require('axios');

const url = "https://api.example.com/v1/questions/create";

const headers = {
    "Authorization": "Bearer your_access_token_here",
    "Content-Type": "application/json"
};

const data = {
    "title": "三角形内角和是多少度?",
    "type": "single_choice",
    "options": ["90", "180", "270", "360"],
    "answer": "B",
    "category": "math",
    "difficulty": "easy"
};

axios.post(url, data, { headers })